<template>

  <el-form ref="scmSupplierOrdersRef" :model="form" label-width="90px" :disabled="true">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="订单编号" prop="orderCode">
          <el-input v-model="form.orderCode" placeholder="请输入订单编号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单日期" prop="orderDate">
          <el-date-picker clearable v-model="form.orderDate" type="date" value-format="YYYY-MM-DD"
                          placeholder="请选择订单日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="供应商名称" prop="sellerTitle">
      <el-input v-model="form.sellerTitle" placeholder="请输入乙方抬头" />
    </el-form-item>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item label="订单到货日" prop="requestedDeliveryDate">
          <el-date-picker clearable v-model="form.requestedDeliveryDate" type="date" value-format="YYYY-MM-DD"
                          placeholder="请选择订单到货日">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="到货日回复" prop="repliedDeliveryDate">
          <el-date-picker clearable v-model="form.repliedDeliveryDate" type="date" value-format="YYYY-MM-DD"
                          placeholder="请选择到货日回复">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-form-item label="订单总金额" prop="totalAmount">
          <el-input v-model="form.totalAmount" placeholder="请输入订单总金额" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="已付款金额" prop="payedAmount">
          <el-input v-model="form.payedAmount" placeholder="请输入已付款金额" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="发票金额" prop="invoiceAmount">
          <el-input v-model="form.invoiceAmount" placeholder="请输入发票金额" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="支付状态" prop="paymentStatus">
      <el-select v-model="form.paymentStatus" placeholder="请选择支付状态 0:未知 1:未付款, 2:部分付款, 3:已付款, 4:超付款">
        <el-option v-for="dict in scm_payment_status" :key="dict.value" :label="dict.label"
                   :value="parseInt(dict.value)"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remarks">
      <el-input v-model="form.remarks" type="textarea" placeholder="请输入内容" />
    </el-form-item>
    <el-divider content-position="center">供应商订单明细信息</el-divider>
    <el-table :data="scmSupplierOrderItemsList" :row-class-name="rowScmSupplierOrderItemsIndex"
              ref="scmSupplierOrderItems">
      <el-table-column label="序号" align="center" prop="index" width="50" fixed />
      <el-table-column label="图号" align="center" prop="scmProjectProducts.drawingNumber" fixed width="100" />
      <el-table-column label="品名" align="center" prop="scmProjectProducts.productName" />
      <el-table-column label="单价" prop="unitPrice" width="80" />
      <el-table-column label="数量" prop="quantity" width="80" />
      <el-table-column label="金额" prop="amount" width="80" />
      <el-table-column label="模具费" prop="moldCost" width="80" />
      <el-table-column label="工装费" prop="jigCost" width="80" />
    </el-table>
  </el-form>

</template>

<script setup>
import {getScmSupplierOrders} from "@/api/scm/scmSupplierOrders.js";

const { proxy } = getCurrentInstance();
const props = defineProps({
  orderId: {
    type:  [Number, String], // 支持数字或字符串类型,
    default: ''
  }
})

watch(
    () => props.orderId,
    (newOrderId) => {
      if (newOrderId) {
        nextTick(() => {
          handleOrderCodeClick(newOrderId);
        });
      }
    }
);

const form = ref({});
const scmSupplierOrderItemsList = ref([]);

// 表单重置
function reset() {
  form.value = {
    id: null,
    projectId: null,
    orderCode: null,
    orderDate: null,
    requestedDeliveryDate: null,
    repliedDeliveryDate: null,
    totalAmount: null,
    payedAmount: null,
    paymentStatus: null,
    buyerTitle: null,
    buyerAddress: null,
    buyerPerson: null,
    buyerPhone: null,
    buyerAccountBank: null,
    buyerAccountNumber: null,
    buyerSignDate: null,
    sellerTitle: null,
    sellerAddress: null,
    sellerPerson: null,
    sellerPhone: null,
    sellerAccountBank: null,
    sellerAccountNumber: null,
    sellerSignDate: null,
    contractFileName: null,
    contractFile: null,
    remarks: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  scmSupplierOrderItemsList.value = [];
  proxy.resetForm("scmSupplierOrdersRef");
}

// 在<script setup>中添加
function handleOrderCodeClick() {
  // 重置表单
  reset();

  // 加载选中行的数据
  getScmSupplierOrders(props.orderId).then(response => {
    form.value = response.data;
    scmSupplierOrderItemsList.value = response.data.scmSupplierOrderItemsList;
    // open.value = true;
    // title.value = "修改供应商订单";
  });
}

/** 供应商订单明细序号 */
function rowScmSupplierOrderItemsIndex({ row, rowIndex }) {
  row.index = rowIndex + 1;
}

handleOrderCodeClick();

</script>